FWF-4762 [feature] Upgrade formio.js and formio-react #2947

leodube-aot · 2025-09-23T17:45:22Z

User description

Issue Tracking

JIRA: https://aottech.atlassian.net/browse/FWF-4762
Issue Type: FEATURE
DEPENDENCY PR: AOT-Technologies/forms-flow-ai-micro-front-ends#823

Changes

Update to use latest dev version of formio.js and formio-react
Fix some bugs. More details on the bugs found here: https://aottech.atlassian.net/wiki/x/AYCAoQ

Checklist

Updated changelog
Added meaningful title for pull request

🔗 Dependency PR Status

Link: #823
Status: 🕐 Open

PR Type

Enhancement, Bug fix

Description

Switch Form prop from form to src
Restore onFormReady prop usage
Centralize FormBuilder options via ref
Update formio imports and dependencies

Diagram Walkthrough

flowchart LR
  FormComponents["Form components"] -- "use src prop" --> RuntimeForms["Runtime forms"]
  FormBuilder["FormBuilder"] -- "initialForm + options ref" --> Designer["Form designer"]
  Imports["formio utils imports"] -- "update paths" --> Build["Build compatibility"]
  PackageJSON["package.json deps"] -- "update formio packages, bpmn-js" --> Dependencies["Updated dependencies"]
  Modals["TaskVariableModal"] -- "onFormReady, showHiddenFields" --> ReadonlyPreview["Readonly preview fixes"]
  IndexEJS["root index.ejs"] -- "add bootstrap icons stylesheet" --> Styles["UI icons available"]

File Walkthrough

Relevant files

Enhancement

9 files

Edit.js `Use src prop for Form rendering`	+1/-1
applicationComponent.js `Update formio utils import path`	+1/-1
helper.js `Migrate utils import to new path`	+1/-1
FormEdit.js `Refactor builder to initialForm and options ref`	+11/-10
FormPreview.js `Switch Form to src prop`	+1/-1
View.js `Replace form with src in Form`	+1/-1
Edit.js `Pass form via src to Form`	+1/-1
ResubmitForm.js `Use src prop for resubmission form`	+1/-1
View.js `Replace form prop with src`	+1/-1

Bug fix

2 files

TaskVariableModal.js `Update Form props and readiness handler`	+4/-4
UserForm.js `Use src and onFormReady for Form`	+2/-2

Dependencies

2 files

index.ejs `Add bootstrap icons stylesheet CDN`	+1/-0
package.json `Point to new formio packages and bump bpmn-js`	+3/-3

github-actions · 2025-09-23T17:46:58Z

PR Code Suggestions ✨

Latest suggestions up to 79ae910

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix unclosed HTML comment The HTML comment is not closed, which will break the document head and potentially ignore subsequent tags. Close the comment properly to avoid malformed HTML and stylesheet loading issues. forms-flow-web-root-config/src/index.ejs [30] <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.full.min.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <!--TODO need to figure out why @aot-technologies/formiojs doesn't package this properly +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <!-- TODO: need to figure out why @aot-technologies/formiojs doesn't package this properly --> Suggestion importance[1-10]: 9 __ Why: The HTML comment after the bootstrap-icons link is indeed unclosed in the PR, which can break parsing of the head. Closing it is a small but critical correctness fix.	High
	Avoid unintended fetches in preview When rendering a static read-only preview, using `src` can trigger network fetching or schema resolution side effects. Pass the schema via `form` instead of `src` to avoid unintended requests and ensure consistent offline rendering. forms-flow-web/src/components/Modals/TaskVariableModal.js [265-275] <Form - src={updatedForm} + form={updatedForm} options={{ viewAsHtml: true, readOnly: true, showHiddenFields: showHiddenFields }} onFormReady={(e) => { formRef.current = e; }} /> Suggestion importance[1-10]: 7 __ Why: Switching from `form` to `src` in a read-only preview can trigger remote fetch or resolver behavior; recommending `form` improves determinism and avoids side effects. It directly matches the changed lines and is context-appropriate.	Medium
	Ensure builder reflects live form Using `initialForm` with a stable `key` can prevent the builder from updating when `form` changes, causing edits not to reflect. Re-key the builder when the working `form` changes and pass the live `form` to ensure the builder reflects current edits. forms-flow-web/src/routes/Design/Forms/FormEdit.js [1310-1316] <FormBuilder - key={initialForm._id} - initialForm={initialForm} + key={form._id} + initialForm={form} onChange={formChange} options={builderOptions.current} onDeleteComponent={captureFormChanges} /> Suggestion importance[1-10]: 5 __ Why: The PR intentionally switches to a memoized `initialForm` and stable `key`, likely to prevent unnecessary remounts; reverting to `form` may reintroduce churn. The concern about updates not reflecting is plausible but speculative without evidence, so impact is moderate.	Low

Previous suggestions

Suggestions up to commit b778160

Category	Suggestion	Impact
Possible issue	Safely memoize initial form Guard against `formData` being null during initial render to avoid a runtime error when accessing `_id`. Include `formData` in dependencies and safely return a clone only when defined. forms-flow-web/src/routes/Design/Forms/FormEdit.js [114] -const initialForm = useMemo(() => _cloneDeep(formData), [formData._id]); +const initialForm = useMemo(() => (formData ? _cloneDeep(formData) : null), [formData, formData?._id]); Suggestion importance[1-10]: 8 __ Why: Accessing `formData._id` in the dependency array can throw if `formData` is null; guarding against null and broadening dependencies prevents a runtime error and ensures correct memoization.	Medium
Possible issue	Fix duplicate CSS and comment Remove the duplicate Formio CSS include to avoid conflicting styles and larger payloads. Also close the HTML comment after the Bootstrap Icons line to prevent malformed markup breaking subsequent tags. forms-flow-web-root-config/src/index.ejs [27-31] <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.full.min.css"> -... -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.full.min.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <!--TODO need to figure out why @aot-technologies/formiojs doesn't package this properly +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <!-- TODO: figure out why @aot-technologies/formiojs doesn't package this properly --> Suggestion importance[1-10]: 7 __ Why: The PR adds Formio CSS twice (lines 23 and 29) and leaves an unclosed HTML comment on the Bootstrap Icons link (line 30), which can cause style duplication and malformed markup; removing the duplicate and closing the comment is correct and improves robustness.	Medium
General	Coerce hidden fields flag Ensure `showHiddenFields` is explicitly boolean to prevent unexpected rendering if it’s undefined or non-boolean. Coerce the value when passing into `options` to avoid leaking hidden fields in read-only previews. forms-flow-web/src/components/Modals/TaskVariableModal.js [265-274] <Form src={updatedForm} options={{ viewAsHtml: true, readOnly: true, - showHiddenFields: showHiddenFields + showHiddenFields: !!showHiddenFields }} onFormReady={(e) => { formRef.current = e; }} /> Suggestion importance[1-10]: 5 __ Why: Coercing `showHiddenFields` to boolean (`!!showHiddenFields`) is a reasonable safeguard to avoid unintended truthy values affecting rendering, though the impact is moderate and context-dependent.	Low

Suggestions up to commit 12ad238

Category	Suggestion	Impact
Possible issue	Fix duplicate CSS and bad comment There is a duplicated Formio CSS include and a malformed HTML comment missing a closing `-->`, which can break HTML parsing and stylesheet loading. Remove the duplicate CSS and close the comment to avoid rendering issues. forms-flow-web-root-config/src/index.ejs [27-31] <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.full.min.css"> <link rel="stylesheet" href="https://cdn.form.io/flatpickr-formio/4.6.13-formio.3/flatpickr.min.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.full.min.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <!--TODO need to figure out why @aot-technologies/formiojs doesn't package this properly +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <!-- TODO: need to figure out why @aot-technologies/formiojs doesn't package this properly --> Suggestion importance[1-10]: 8 __ Why: It correctly identifies a duplicated Formio CSS include and an unclosed HTML comment that could cause parsing issues. Fixing both is important for correctness and rendering stability.	Medium
Possible issue	Ensure boolean option consistency The `options` object is missing a default for `showHiddenFields`, which can be `undefined` and cause hidden fields to unexpectedly render. Explicitly coerce it to a boolean to avoid inconsistent behavior across renders. forms-flow-web/src/components/Modals/TaskVariableModal.js [265-275] <Form src={updatedForm} options={{ viewAsHtml: true, readOnly: true, - showHiddenFields: showHiddenFields + showHiddenFields: !!showHiddenFields }} onFormReady={(e) => { formRef.current = e; }} /> Suggestion importance[1-10]: 5 __ Why: Coercing `showHiddenFields` to a boolean is a reasonable minor robustness improvement and matches the new props (`options.showHiddenFields`). Impact is moderate and the change is accurate to the diff context.	Low
General	Fix stale FormBuilder re-renders Using `initialForm` for the `key` may prevent re-renders when other critical props change, leaving a stale builder. Use a stable key that updates whenever the source form changes to ensure the builder resets predictably. forms-flow-web/src/routes/Design/Forms/FormEdit.js [1283-1290] <FormBuilder - key={initialForm._id} + key={`${initialForm?._id \|\| 'new'}-${initialForm?.modified \|\| form?.modified \|\| 0}`} initialForm={initialForm} onChange={formChange} options={{ language: lang, }} /> Suggestion importance[1-10]: 6 __ Why: Using a more robust `key` helps ensure the builder resets when the underlying form changes; the proposed key logic is sensible though speculative about `modified` presence. It addresses potential staleness without contradicting the PR.	Low

sonarqubecloud · 2025-10-21T15:43:37Z

Quality Gate failed

Failed conditions
B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

leodube-aot added 5 commits October 13, 2025 10:34

Update formiojs imports

ebf2e8b

Update formio Form src prop

e261307

Add bootstrap icon stylesheet

c70ce6f

Update to use npm packages for formio-react and formiojs

c27b52e

Fix rebase issues

b778160

leodube-aot force-pushed the FWF-4762 branch from 12ad238 to b778160 Compare October 13, 2025 17:36

leodube-aot added 2 commits October 13, 2025 11:09

Create static reference to FormBuilder options

1222af2

Restore i18n prop on FormBuilder

79ae910

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

FWF-4762 [feature] Upgrade formio.js and formio-react #2947

FWF-4762 [feature] Upgrade formio.js and formio-react #2947

Uh oh!

leodube-aot commented Sep 23, 2025 •

edited by github-actions bot

Loading

Uh oh!

github-actions bot commented Sep 23, 2025 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Oct 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

FWF-4762 [feature] Upgrade formio.js and formio-react #2947

Are you sure you want to change the base?

FWF-4762 [feature] Upgrade formio.js and formio-react #2947

Uh oh!

Conversation

leodube-aot commented Sep 23, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Issue Tracking

Changes

Checklist

🔗 Dependency PR Status

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

github-actions bot commented Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Code Suggestions ✨

Previous suggestions

Uh oh!

sonarqubecloud bot commented Oct 21, 2025

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

leodube-aot commented Sep 23, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Sep 23, 2025 •

edited

Loading